<template>
	<div>
		<div id="selectDiv" :style="`width:${width}px`">
			<div class="optionsDiv">
				<div class="optionName">政策类别：</div>
				<div class="optionTitleDiv">
					<div class="allOptionDiv">
						<div @click="selectType({name: '全部'}, -1)" :class="typeIndex == -1 ? 'optionDiv optionDivSelected' : 'optionDiv'">全部</div>
					</div>
					<div class="orderOptionDiv">
						<div @click="selectType(type, index)" :class="typeIndex == index ? 'optionDiv optionDivSelected' : 'optionDiv'"
							 v-for="(type, index) in types">{{type.name + (type.amount == undefined ? '' : '(' + type.amount
							+ ')')}}
						</div>
					</div>
				</div>
			</div>
			<div class="optionsDiv" v-if="type == 'redemption'">
				<div class="optionName">兑现方式：</div>
				<div class="optionTitleDiv">
					<div class="allOptionDiv">
						<div @click="selectRedemption({name: '全部'}, -1)" :class="redemptionIndex == -1 ? 'optionDiv optionDivSelected' : 'optionDiv'">全部</div>
					</div>
					<div class="orderOptionDiv" v-if="redemptions.length > 0">
						<div @click="selectRedemption(redemption, index)" :class="redemptionIndex == index ? 'optionDiv optionDivSelected' : 'optionDiv'"
							 v-for="(redemption, index) in redemptions">{{redemption.name + (redemption.amount == undefined ? '' : '(' + redemption.amount +
							')')}}
						</div>
					</div>
				</div>
			</div>
			<div class="optionsDiv" v-else>
				<div class="optionName">政策级别：</div>
				<div class="optionTitleDiv">
					<div class="allOptionDiv">
						<div @click="selectTag({name: '全部'}, -1)" :class="tagIndex == -1 ? 'optionDiv optionDivSelected' : 'optionDiv'">全部</div>
					</div>
					<div class="orderOptionDiv">
						<div @click="selectTag(tag, index)" :class="tagIndex == index ? 'optionDiv optionDivSelected' : 'optionDiv'"
							 v-for="(tag, index) in tags">{{tag.name + (tag.amount == undefined ? '' : '(' + tag.amount +
							')')}}
						</div>
					</div>
				</div>
			</div>
			<div class="policyCountsDiv">
				<div class="policyCountDiv">
					<span>政策数量：</span>
					<span class="policyCount">{{policyTotal}}</span>
					<span>条</span>
				</div>
				<div class="policyCountDiv">
					<span>政策浏览数：</span>
					<span class="policyCount">{{policyTotalPv}}</span>
					<span>条</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
  import { getPolicydict } from "@/common/api/policy.js";

	export default {
		name: "selectBox",
		data() {
			return {
				tags: [],
				tagIndex: 0,
				types: [],
				redemptions: [],
				redemptionIndex: 0,
				typeIndex: 0,
				policyTotal: 0,
				policyTotalPv: 0
			}
		},
		props: {
			width: {
				type: Number,
				default: 1200
			},
			type: {
				type: String,
				default: 'other'
			}
		},
		methods: {
			/**
			 * 获取政策类别和关键字信息
			 */
			async getTagsAndTypes() {
				let ns = this
				ns.types = []
				ns.typeIndex = -1
				ns.tags = []
				ns.tagIndex = -1
				ns.redemptions = []
				ns.redemptionIndex = -1
				// 政策兑换引用需加entrance = 2的请求参数，政策清单不可加
				let data = {};
				ns.type == 'redemption' ? data.entrance = 2 : data = {};
        let res = await getPolicydict(data)
        console.log('123',res)
        ns.types = ns.types.concat(res.data.type)
        ns.tags = ns.tags.concat(res.data.level)
        ns.redemptions = ns.redemptions.concat(res.data.redemption);
        ns.policyTotal = res.data.policyTotal || 0
        ns.policyTotalPv = res.data.policyTotalPv || 0
			},
			/**
			 * 选择政策类别事件
			 * @param type 被选中的政策类别对象
			 * @param index 被选中的政策类别下标
			 */
			selectType: function (type, index) {
				let ns = this
				ns.typeIndex = index
				ns.changeOption()
			},
			/**
			 * 选择关键字事件
			 * @param tag 被选中的关键字对象
			 * @param index 被选中的关键字下标
			 */
			selectTag: function (tag, index) {
				let ns = this
				ns.tagIndex = index
				ns.changeOption()
			},
			/**
			 * 选择关键字事件
			 * @param tag 被选中的关键字对象
			 * @param index 被选中的关键字下标
			 */
			selectRedemption: function (redemption, index) {
				let ns = this
				ns.redemptionIndex = index;
				ns.changeOption()
			},
			/**
			 * 改变筛选选项
			 */
			changeOption: function () {
				let ns = this
				let data = {
					type: ns.typeIndex == -1 ? {name: '全部'} : ns.types[ns.typeIndex],
					tag: ns.tagIndex == -1 ? {name: '全部'} : ns.tags[ns.tagIndex],
					redemption: ns.redemptionIndex == -1 ? {name: '全部'} : ns.redemptions[ns.redemptionIndex]
				}
				ns.$emit('changeOption', data)
			}
		},
		mounted() {
			let ns = this
			ns.getTagsAndTypes()
		}
	}
</script>

<style scoped>
	#selectDiv {
		border: 1px solid #e1e1e1;
		margin: 0 auto;
	}

	#selectDiv .optionsDiv {
		text-align: left;
		padding: 20px;
		border-bottom: 1px solid #e1e1e1;;
		font-size: 15px;
		color: #676767;
		display: flex;
		justify-content: left;
	}

	#selectDiv .optionsDiv .optionName {
		width: 80px;
		padding: 5px 0;
		white-space: nowrap;
	}

	#selectDiv .optionsDiv .optionTitleDiv {
		display: flex;
		width: 100%;
	}

	#selectDiv .optionsDiv .optionTitleDiv .allOptionDiv {
		white-space: nowrap;
	}

	#selectDiv .optionsDiv .optionTitleDiv .orderOptionDiv {
		display: flex;
		flex-wrap: wrap;
	}

	#selectDiv .optionsDiv .optionTitleDiv .optionDiv {
		padding: 5px 10px;
		margin: 2px 10px;
	}

	#selectDiv .optionsDiv .optionTitleDiv .optionDiv:hover {
		cursor: pointer;
		transition: all 0.2s ease 0s;
	}

	#selectDiv .optionsDiv .optionTitleDiv .optionDivSelected {
		color: #FFFFFF;
		background-color: #ce0000;
	}

	.policyCountsDiv {
		background-color: #F4F4F4;
		display: flex;
		padding: 15px 20px;
	}

	.policyCountsDiv .policyCountDiv {
		margin-right: 50px;
	}

	.policyCountsDiv .policyCountDiv .policyCount {
		color: #045dbb;
	}
</style>
